@import "common";

.header{
        font-size: r(30px);
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        .title{
            padding: 0 r(30px);
            height: r(88px);
            width: 100%;
            background-color: #d43d3d;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .message{
                height: r(50px);
                width: r(64px);
                background-color: red;
                background: url(~img/t_message.png) no-repeat;
                background-size: contain;
            }
            .logo{
                
                .pic{
                    display: inline-block;
                    width: r(166px);                
                    height: r(88px);
                    background: url(~img/t_logo.png) no-repeat right center;
                    background-size: r(166px);
                }
                .refresh{
                    display: inline-block;
                    width: r(50px);
                    height: r(88px);
                    background: url(~img/t_refresh.png) no-repeat center center;
                    background-size: r(30px);
                    transform-origin: center center;
                }
                .load_refresh{
                    transition: all 1.5s;
                    transform: rotatez(360deg);
                }
            }
            .search{
                height: r(50px);
                width: r(64px);
                background-color: red;
                background: url(~img/t_search.png) no-repeat;
                background-size: contain;
                
            }
        }
    }
  
  
//搜索框  
.s_active{
    opacity: 0;
    transform: rotate(180deg);
}
.search_frame{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    right: 0;
    background-color: #fff;
    z-index: 777;
    transition: all .6s;
    transform-origin: top right;
    overflow-y: scroll;
    .top_bar{
        width: 100%;
        height: r(88px);
        font-size: r(40px);
        font-weight: 700;
        line-height: r(88px);
        color: #fff;
        background-color: #d43d3d;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        .back{
            display: block;
            width: r(88px);
            height: r(88px);
            background: url(~img/header_back.png) no-repeat center center;
        }
        .s_title{
            text-align: center;
        }
        .none{
            display: block;
            width: r(88px);
        }
    }
    .s_input_frame{
        position: relative;
        background: #c9c9c9;
        padding: r(10px);
        display: flex;
        justify-content: flex-start;
        border: 1px solid #fff;
        border-radius: r(6px);
        .kind_select{
            position: absolute;
            top: r(90px);
            left: r(10px);
            width: r(480px);
            z-index: 1000;
            transform-origin: 10% 0;
            transition: all .2s ease-in-out 0s;
            &::before{
                content: "";
                position: absolute;
                top: r(-10px);
                left: r(20px);
                border-right: transparent r(10px) solid;
                border-left: transparent r(10px) solid;
                border-bottom: silver r(10px) solid;
                width: 0;
                height: 0;
            }
            .k_list{
                background-color: #c9c9c9;
                padding: 0;
                border-radius: r(8px);
                list-style-type: none;
                overflow: hidden;
                border: r(2px) solid silver;
                text-align: left;
                white-space: nowrap;
                vertical-align: top;
                >li{
                    display: inline-block;
                    width: 31%;
                    i{
                        display: block;
                        text-align: center;
                        padding: r(100px) 0 r(10px);
                        color: #555;
                        font-size: r(24px);
                        font-weight: 600;
                        text-decoration: none;
                        background: url(http://s3.pstatp.com/image/toutiao_mobile/search_icons.png?ver=201408311655) no-repeat center r(4px);
                        background-size: r(76px);
                    }
                    .tt_k{
                        background-position: center r(-132px);
                    }
                    .sm_k{
                        background-position: center r(-280px);
                    }
                    .bd_k{
                        background-position: center r(16px);
                    }
                }
            }
        }
        .kind_select_active{
            transform: scale(0);
        }
        .s_kind{
            position: relative;
            display: block;
            height: r(54px);
            width: r(80px);
            background: url(http://s3.pstatp.com/image/toutiao_mobile/search_icons.png?ver=201408311655) #fff no-repeat r(5px) r(2px);
            background-size: r(40px);
            transition: all .7s;
            &::after{
                content: "";
                position: absolute;
                top: r(27px);
                left: r(57px);
                border-right: transparent r(6px) solid;
                border-left: transparent r(6px) solid;
                border-top: #c9c9c9 r(6px) solid;
                width: 0;
                height: 0;
            }
        }
//      搜索类型激活类
        .tt_p{
            background-position: r(5px) r(-75px);
        }
        .bd_p{
            background-position: r(5px) r(5px);
        }
        .sm_p{
            background-position: r(5px) r(-150px);
        }
        .s_cover{
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.8);
            z-index: 999;
        }
        .sc_active{
            display: none;
        }
        .i_frame{
            width: r(660px);
            height: r(54px);
            background-color: #fff;
            padding: r(5px);
            font-size: r(25px);
            
            >input{
                width: 100%;
                height: 100%;
                border: none;
                &::-webkit-input-placeholder{
                    font-size: r(25px);
                }
            }
        }
    }
    //输入提示样式
    .s_tip{
        margin-top: r(-6px);
        width: r(650px);
        margin-left: r(90px);
        text-align: left;
        border: r(2px) solid #c9c9c9;
        border-top-color: transparent;
        >li{
            display: block;
            height: r(77px);
            line-height: r(77px);
            padding-left: r(10px);
            >a{
                display: block;
                width: 100%;
                height: 100%;
                text-decoration: none;
                color: #c9c9c9;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }        
    }
    .s_tip_hid{
        display: none;
    }
    //头条提示列表
    .TT_list{
        width: 100%;
        height: auto;
        text-align: left !important;
        padding: 0 r(30px);
        >li{
            width: 100%;
            text-align: left;
            border-bottom: r(2px) solid #333;
           .tt_article{
               display: block;
               width: 100%;
               padding: r(32px) 0;
               text-decoration: none;
               color: #333;
               background-color: #fff;
               .a_title{
                   text-align: left;
                   width: 100%;
                   display: block;
                   font-weight: 700;
                   text-overflow: ellipsis;
                   overflow: hidden;
                   display: -webkit-box;
                   -webkit-box-orient: vertical;
                   color: #222;
                   font-size: r(38px);
                   text-align: justify;
               }
               .a_img{
                   width: 100%;
                   margin-top: r(10px);
                   text-align: left !important;
                   >li{
                       margin-bottom: r(5px);
                       vertical-align: middle;
                       display: inline-block;
                       width: 33%;
                       overflow: hidden;
                       >img{
                           width: 98%;
                           height: auto;
                           display: block;
                       }
                   }
               }
               .a_info{
                   font-size: r(15px);
                   height: r(20px);
                   line-height: r(20px);
                   color: #999;
                   margin-top: r(20px);
                   text-align: left;
                   >span{
                       margin-right: r(20px);
                   }
               }
           } 
        }
        
    }
    
}



nav{
    width: 100%;
    height: r(72px);
    background-color: #f4f5f6;
    line-height: r(72px);
    text-align: left;
    position: relative;
    .link{
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-right: r(80px);
        line-height: r(72px);
        &::-webkit-scrollbar{
            display: none;
        }
        >li{
            display: inline-block;
            .t_btn{
                margin: r(10px);
                margin-right: 0;
                height: r(52px);
                font-size: r(34px);
                padding: 0 r(20px);
                line-height: r(52px);
                color: #505050;
            }
        }
        
    }
    .add{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: r(80px);
        height: r(72px);
        &::before{
            content: "";
            display: inline-block;
            width: r(4px);
            height: r(34px);
            background-color: #f85959;
            
        }
        &::after{
            content: "";
            display: inline-block;
            width: r(4px);
            height: r(34px);
            background-color: #f85959;
            transform: rotate(90deg);
            transform-origin: center;
            margin-left: r(-4px);
        }
    }
}


//频道管理
.chanel{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f8f8;
    z-index: 33;
    transition: all 0.5s;
    .toolbar{
        width: 100%;
        height: r(100px);
        background-color: #d43d3d;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .t_back{
            width: r(88px);
            height: 100%;
            line-height: r(100px);
            text-align: center;
            .t_icon{
                transform: rotateZ(45deg);
                transform-origin: center center; 
                display: inline-block;
                height: r(30px);
                width: r(30px);
                border-left: r(6px) solid;
                border-bottom: r(6px) solid;
                border-color: #fff;
            }
        }
        .t_title{
            font-weight: 900;
            color: #FFFFFF;
            font-size: r(32px);
        }
        .t_space{
            width: r(88px);
        }
    }
    .content{
        text-align: left;
        width: 100%;
        .c_tips{
            padding: 0 r(20px);
            font-size: r(24px);
            line-height: 2em;
        }
        .c_list{
            margin: r(20px) 0;
            transition: all 0.3s;
            >li{
                display: inline-block;
                width: 25%;
                margin-bottom: r(20px);
                >span{
                    font-size: r(32px);
                    display: block;
                    margin: 0 r(16px);
                    border: r(2px) solid #ccc;
                    text-align: center;
                    line-height: 2em;
                    color: #131313;
                    text-decoration: none;
                    font-weight: 500;
                }
            }
        }
    }
}
.chanel_back{
    transform: translatex(100%);
    opacity: 0;
}


//信息弹窗
.o_message{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    transition: all .5s;
    transform: scale(1);
    transform-origin: left top;
    .o_content{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: r(-270px);
        margin-top: r(-225px);
        width: r(540px);
        height: r(450px);
        background-color: white;
        border-radius: r(10px);
        .o_pic{
            width: r(330px);
            height: r(242px);
            margin-left: r(108px);
            margin-top: r(20px);
//          background-color: red;
            background-image: url(~img/o_bgc.png);
        }
        .o_desc{
            display: block;
            margin-bottom: r(48px);
            margin-top: r(12px);
            font-size: r(34px);
            color: #a5a5a5;
            line-height: r(36px);
        }
        .o_open{
            font-size: r(40px);
            margin-bottom: r(30px);
            margin-top: r(10px);
            line-height: r(80px);
            width: r(440px);
            margin-left: r(50px);
            background-color: #ff6762;
            text-align: center;   
            border-radius: r(10px);
            text-shadow: 0px 1px 1px #f0221c;
            color: #fff;
        }
        .o_close{
            height: r(64px);
            width: r(80px);
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            &::after{
                display: inline-block;
                content: "";
                width: r(50px);
                height: r(3px);
                background-color: #a5a5a5;
                transform: rotateZ(45deg);
                transform-origin: center center; 
            }
            &::before{
                display: inline-block;
                content: "";
                height: r(50px);
                width: r(3px);
                position: absolute;
                left: 50%;
                background-color: #a5a5a5;
                transform: rotateZ(45deg);
                transform-origin: center center; 
            }
        }
    }
}
.message_active{
    transform: scale(0);
    opacity: 0;
}
